<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="Form" :inline="true"  label-width="90px">
          <el-form-item label="日期：" prop="dateTtime">
            <el-date-picker
               v-model="dateTtime"
               value-format="yyyy-MM-dd"
               :picker-options="pickerOptions"
               type="date"
               :editable="false"
               placeholder="请选择日期">
             </el-date-picker>
            </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 10px;">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
         </el-form>
         <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item
            v-for="(item,index) in breadcrumbList"
            :key="index"
            @click.native="clickBreadcrumb(item)"
            ><span style="cursor:pointer;font-weight: bold;margin-left: 10px;font-size: 18px;">{{item.name}}</span></el-breadcrumb-item>
          </el-breadcrumb>
         <div class="charts"   >
            <div  ref="myChartdom1" class="chartdom1"></div>
            <div  v-show="schoolList.length !== 0" ref="myChartdom2" class="chartdom2"></div>
            <p style="width: 500px;" v-show="schoolList.length === 0">未找到各园平均饮水量，请重新搜索.....</p>
          </div>
    </div>
</template>
<script>
import moment from "moment";
import { regionDrinkWater,schoolavgWater,schoolDrinkWater,classAvgWater,classDrinkWater,studentDrinkWater } from "@/api/qu/qyyeyszx";
import { formatDateOnly} from "@/utils";

 export default {
   name: "qyysgk",
   data() {
     return {
        dateTtime:new Date(),
        pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              },
            },
        queryParams:{

        },
        drinkWaterList:[
            {name:'充足',value:2},
            {name:'达标',value:2},
            {name:'不足',value:2},
            {name:'未入园',value:5},

        ],
        schoolList:[
            {name:'幼儿园1',value:'3'},
            {name:'幼儿园2',value:'3'},
            {name:'幼儿园3',value:'3'},
            {name:'幼儿园4',value:'3'},
        ],
        breadcrumbList:[
            {name:'全区',value:'1'},
            // {name:'幼儿园',value:'2'},
            // {name:'年级',value:'3'},
        ],
        bread:{
          name:'',
          value:''
        },
        schoolTitle:'各园平均饮水量',
        myCharts1:null,
        myCharts2:null,
        title:'全区幼儿饮水情况',
        schoolCode:'',
        classId:'',
         previousDate:''
     };
   },
   created() {
     // 获取当前日期
      const currentDate = new Date();
      // 获取前一天的日期
      this.previousDate = new Date(currentDate);
      this.previousDate.setDate(currentDate.getDate() - 1);
      this.dateTtime = formatDateOnly(this.previousDate)

   },
   mounted(){
     this.myCharts1 = this.$echarts.init(this.$refs.myChartdom1)
     this.myCharts2 = this.$echarts.init(this.$refs.myChartdom2);
     this.init()
     window.addEventListener("resize", this.monitorResize);
   },
   methods: {
    init(){
      this.getRegionDrinkWater()
      this.getSchoolavgWater()
    },
    //区幼儿饮水数据
    async getRegionDrinkWater(){
      try {
         const obj ={
          drinkDate:this.dateTtime,
         }
         const {data} = await regionDrinkWater(obj)
         this.drinkWaterList=[
            {name:'充足',value:data.waterEnough},
            {name:'达标',value:data.waterJust},
            {name:'不足',value:data.waterLack},
            {name:'未入园',value:data.wryNum},
        ];
         this.myChartsFn1()
      } catch (error) {
        console.log(error);
      }
    },
    //园级饮水情况
     async getSchoolDrinkWater(){
      try {
         const obj ={
          drinkDate:this.dateTtime,
          schoolCode:this.schoolCode
         }
         const {data} = await schoolDrinkWater(obj)
         this.drinkWaterList=[
            {name:'充足',value:data.waterEnough},
            {name:'达标',value:data.waterJust},
            {name:'不足',value:data.waterLack},
            {name:'未入园',value:data.wryNum},
        ]
        this.myChartsFn1()
      } catch (error) {
        console.log(error);
      }
    },
    //班级饮水情况
    async getClassDrinkWater(){
        try {
          const obj ={
              drinkDate:moment(this.dateTtime).format("YYYY-MM-DD"),
              classId:this.classId
             }
             const {data} = await classDrinkWater(obj)
             this.drinkWaterList=[
                {name:'充足',value:data.waterEnough},
                {name:'达标',value:data.waterJust},
                {name:'不足',value:data.waterLack},
                {name:'未入园',value:data.wryNum},
            ]
            this.myChartsFn1()
          } catch (error) {
            console.log(error);
         }
    },
    //幼儿饮水总量和次数
    async getStudentDrinkWater(){
      try {
          const obj ={
              drinkDate:moment(this.dateTtime).format("YYYY-MM-DD"),
              classId:this.classId
             }
             const data = await studentDrinkWater(obj)
             this.schoolList= data.rows.map(item=>{
               return {
                name:item.name,
                value:item.drinkTotal,
                code:item.schoolCode
               }
             })
            this.myChartsFn2()
          } catch (error) {
            console.log(error);
         }
    },
    //平均饮水量
    async getSchoolavgWater(){
      try {
        const obj ={
          drinkDate:moment(this.dateTtime).format("YYYY-MM-DD"),
         }
         const {data} = await schoolavgWater(obj)
         this.schoolList= data.map(item=>{
           return {
            name:item.schoolName||'无极县幼儿园',
            value:item.waterAvg||0,
            code:item.schoolCode||'123'
           }
         })
         this.myChartsFn2()
      } catch (error) {
        console.log(error);
      }
    },
    //各班平均饮水量
    async getClassAvgWater(){
      try {
        const obj ={
          drinkDate:moment(this.dateTtime).format("YYYY-MM-DD"),
          schoolCode:this.schoolCode
         }
         const {data} = await classAvgWater(obj)
         this.schoolList= data.map(item=>{
           return {
            name:item.className,
            value:item.waterAvg,
            code:item.classId
           }
         })
         this.myChartsFn2()
      } catch (error) {
        console.log(error);
      }
    },
    //监听添加面包屑
    addBread(bread){
      const index=this.breadcrumbList.findIndex(item=>item.name===bread.name)
      if(index>-1) {
        const index=this.breadcrumbList.findIndex(item=>item.name===bread.name)
        this.breadcrumbList=this.breadcrumbList.slice(0,index+1)
      }else{
        this.breadcrumbList.push(bread)
      }
    },
    //点击面包屑
    clickBreadcrumb(bread){
      const index=this.breadcrumbList.findIndex(item=>item.name===bread.name)
      this.breadcrumbList=this.breadcrumbList.slice(0,index+1);
      // console.log(this.breadcrumbList);
      if(bread.name=='全区'){
        this.bread={
          name:'',
          value:''
        }
        this.schoolTitle='各园平均饮水量',
        this.title='全区幼儿饮水情况',
        this.init()
      }else if(bread.name.includes('幼儿园')){
          this.bread={
            name:bread.name,
            value:bread.value
          }
          this.schoolTitle=bread.name+'平均饮水量',
          this.title=bread.name+'幼儿饮水情况',
          this.classId=''
          this.getSchoolDrinkWater();
          this.getClassAvgWater()
      }else if(bread.name.includes('班')){
          this.schoolTitle=bread.name+'各幼儿饮水量',
          this.title=bread.name+'幼儿饮水情况',
          this.getClassDrinkWater();
          this.getStudentDrinkWater();
      }else{
        this.bread={
          name:'',
          value:''
        }
        this.schoolTitle='各园平均饮水量',
        this.title='全区幼儿饮水情况',
        this.init()
      }
    },
     //全区幼儿饮水情况
     myChartsFn1(){
         const option = {
             title: [
               {
                 text: this.title,
                 left: 'left',
                 subtext: '单位：人',
               },
             ],
              legend: {
               type: 'scroll',
               orient: 'vertical',
              //  left: 0,
               right:'10%',
               top:'7%',
               bottom: 0,

             },
            //  toolbox: {
            //    show: true,
            //    feature: {
            //      saveAsImage: { show: true , title: '下载'}
            //    }
            //  },
             tooltip: {
               trigger: 'item',
              //  formatter: '{a} <br/>{b} : {c} ({d}%)'
             },
             series: [
               {
                 name:'幼儿饮水',
                 type: 'pie',
                 radius: '48%',
                 center: ['40%', '50%'],
                 data:  this.drinkWaterList,
                 label: {
                   position: 'outer',
                   alignTo: 'none',
                   bleedMargin: 5
                 },
                 left: 0,
                //  right: '45%',
                 top: 0,
                 bottom: 0
               },
             ]
             };
           // 使用刚指定的配置项和数据显示图表
           this.myCharts1.setOption(option,true);
           window.addEventListener("resize", this.monitorResize);
     },
     //柱状图
     myChartsFn2(){
         this.myCharts2.off("click"); //解绑---请求只发一次
         const option = {
        // backgroud:'#333',
        title: {
             text: this.schoolTitle,
            //  subtext: 'Fake Data',
             left:'left'
           },
        dataZoom: {
          bottom: 0,
          show: 8 / this.schoolList.length < 1,
          // show:true,
          type: 'slider',
          zoomLock: true,
          brushSelect: false,
          height: 8,
          // backgroundColor:'#000000',
          handleSize: '0',
          // moveHandleSize:1,
          // moveHandleStyle:{
          //   borderType:'dotted'
          // },
          sow: true,
          xAxisIndex: [0],
          start: 0,
          end: 8 / this.schoolList.length * 100
        },
        tooltip: {
             trigger: 'axis',
             axisPointer: {
             type: 'shadow'
             }
         },
        //  toolbox: {
        //        show: true,
        //        feature: {
        //          saveAsImage: { show: true , title: '下载'}
        //        }
        //      },
         legend: {},
         grid: {
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true
         },
         xAxis: [
             {
             type: 'category',
             axisLabel: {//x轴文字的配置
              show: true,
              interval: 0,//使x轴文字显示全
             },
             // data:this.echartList.map((item) => item.name)
             data:this.schoolList.map((item) => item.name)
             }
         ],
         yAxis: [
             {
             type: 'value',
             name:'单位：ml'
             }
         ],
         color:['#2f89cf','#27d08a'],
         series: [
             {
                //  name: '平均饮水量',
                 type: 'bar',
                 // stack: 'Ad',
                 emphasis: {
                     focus: 'series'
                 },
                 barWidth:80,
                 label: {
                   show: true,
                   position: 'inside',
                   fontSize: 15
                 },
                 // data: this.echartList.map((item) => item.value),
                 data:this.schoolList,
             },
         ]
         }
         this.myCharts2.on("click",(params)=>{
          // console.log(params);
               if(params.componentType==='series'){
                if(params.name.includes('幼儿园')){
                  this.schoolCode=params.data.code;
                  this.bread={
                      name:params.name,
                      value:this.schoolCode,
                    }
                    // console.log( this.bread);
                  this.addBread(this.bread);
                    this.title=params.name+'幼儿饮水情况';
                    this.schoolTitle=params.name+'各班平均饮水量';
                    this.getSchoolDrinkWater();
                    this.getClassAvgWater()
                }else if(params.name.includes('班')){
                    this.classId=params.data.code;
                    this.bread={
                      name:params.name,
                      value:this.classId,
                    }
                    // console.log( this.bread);
                    this.addBread(this.bread);
                    this.title=params.name+'幼儿饮水情况';
                    this.schoolTitle=params.name+'各幼儿饮水量';
                    this.getClassDrinkWater();
                    this.getStudentDrinkWater()
                }
              }
            })

           // 使用刚指定的配置项和数据显示图表
           this.myCharts2.setOption(option,true);
           window.addEventListener("resize", this.monitorResize);
     },
     handleQuery(){
      // console.log(this.bread);
      if(this.bread.name==''){
          this.schoolCode=''
          this.classId='';
          this.schoolTitle='各园平均饮水量',
          this.title='全区幼儿饮水情况',
          this.init()
      }else if(this.bread.name.includes('幼儿园')){
          this.classId='';
          this.schoolTitle=this.bread.name+'平均饮水量',
          this.title=this.bread.name+'幼儿饮水情况',
          this.getSchoolDrinkWater();
          this.getClassAvgWater()
      }else if(this.bread.name.includes('班')){
          this.schoolTitle=this.bread.name+'各幼儿饮水量',
          this.title=this.bread.name+'幼儿饮水情况',
          this.getClassDrinkWater();
          this.getStudentDrinkWater();
      }else{
        this.schoolCode='';
        this.classId='';
        this.schoolTitle='各园平均饮水量',
        this.title='全区幼儿饮水情况',
        this.init()
      }
     },
     resetQuery(){
        this.dateTtime = formatDateOnly(this.previousDate)
        this.schoolTitle='各园平均饮水量',
        this.title='全区幼儿饮水情况',
        // this.dateTtime=new Date(),
        this.breadcrumbList=[
            {name:'全区',value:'1'},
        ],
        this.bread={
          name:'',
          value:''
        },
        this.handleQuery()
     },
    //地图监听窗口缩放事件
      monitorResize(){
       this.myCharts1.resize();
       this.myCharts2.resize();
     },
   }
 };
</script>
<style lang="scss" scoped>
.charts{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    height:840px;
    margin-top: 20px;
    .chartdom1{
        width: 40%;
        height: 60%;
    }
    .chartdom2{
        width: 55%;
        height: 60%;

    }
}
</style>
